<template>
  <div class="drafts-container">
    <HeaderComponents/>
    <br>
    <h2>我的草稿箱</h2>

    <!-- 错误/提示信息 -->
    <div v-if="message" class="message">{{ message }}</div>

    <div class="actions">
      <button @click="createNewDraft" class="btn-new-draft">新建草稿</button>
    </div>

    <!-- 草稿列表 -->
    <div class="draft-list">
      <div v-for="draft in drafts" :key="draft.draftId" class="draft-item" @click="goToEdit(draft.draftId)">
        <div class="draft-info">
          <h3 class="draft-title">{{ draft.title || '无标题草稿' }}</h3>
          <div class="draft-meta">
            <span class="draft-type">类型: {{ draft.draftType || '未分类' }}</span>
            <span class="edit-time">最后编辑: {{ formatTime(draft.lastEditTime) }}</span>
            <span :class="['submit-status', draft.isSubmit === 1 ? 'submitted' : 'unsubmitted']">
        {{ draft.isSubmit === 1 ? '已提交' : '未提交' }}
      </span>
          </div>
        </div>
        <div class="draft-actions">
          <button @click.stop="deleteDraft(draft.draftId)">删除</button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="drafts.length === 0 && !message" class="empty-state">
      暂无草稿，快去创建你的第一篇草稿吧~
    </div>
  </div>
</template>

<script>
import SearchInput from "@/components/SearchInput.vue";
import HeaderComponents from "@/components/HeaderComponents.vue";

export default {


  components: {HeaderComponents, SearchInput},
  data() {
    return {
      drafts: [],
      message: '',
      currentUserId: null // 实际项目中应从登录信息获取
    };
  },
  mounted() {
    this.loadCurrentUser(); // 加载当前用户信息
    this.loadUserDrafts();
  },
  methods: {
    createNewDraft() {
      this.$router.push({
        path: '/draft/edit',
        query: {
          draftId: null // 表示这是一个新草稿
        }
      });
    },
    handleSearch(keyword) {
      this.$router.push({
        name: 'SearchView',
        query: { keyword }
      });

    },

    // 获取当前登录用户信息
    loadCurrentUser() {
      try {
        const userJson = localStorage.getItem('user');
        if (userJson) {
          const user = JSON.parse(userJson);
          this.currentUserId = user.uid;
        } else {
          this.message = '用户未登录';
          this.$router.push('/login');
        }
      } catch (error) {
        console.error('解析用户信息失败:', error);
        this.message = '用户信息格式错误';
      }
    },

    // 加载用户草稿
    async loadUserDrafts() {
      if (!this.currentUserId) {
        this.message = '无法加载草稿：用户未登录';
        return;
      }

      try {
        const response = await  this.$axios.get('/api/draft/list', {
          params: { uid: this.currentUserId }
        });

        if (response.data.code === 200) {
          this.drafts = response.data.data || [];
        } else {
          this.message = '加载草稿失败: ' + response.data.message;
        }
      } catch (error) {
        this.message = '请求失败: ' + error.message;
      }
    },

    // 跳转到编辑页面
    goToEdit(draftId) {
      this.$router.push({
        path: '/draft/edit',
        query: { draftId: draftId } // 通过路由参数传递草稿ID
      });
    },

    // 删除草稿
    async deleteDraft(draftId) {
      try {
        const response = await this.$axios.delete('/api/draft/delete', {
          params: { draftId } // DELETE 请求参数通过 params 传递
        });
        if (response.data.code === 200) {
          this.message = '草稿删除成功';
          this.loadUserDrafts(); // 刷新列表
        } else {
          this.message = '删除失败: ' + response.data.message;
        }
      } catch (error) {
        this.message = '请求失败: ' + error.message;
      }
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '未知时间';
      const date = new Date(timeStr);
      return date.toLocaleString();
    }
  }
};
</script>

<style scoped>
.drafts-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
}

.message {
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
  color: #dc3545;
  background-color: #f8d7da;
}

.draft-list {
  margin-top: 20px;
}

.draft-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.draft-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.draft-title {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 18px;
}

.draft-meta {
  display: flex;
  gap: 20px;
  color: #6c757d;
  font-size: 14px;
}

.draft-actions button {
  padding: 6px 12px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.draft-actions button:hover {
  background-color: #bb2d3b;
}

.empty-state {
  text-align: center;
  padding: 50px 0;
  color: #6c757d;
  background-color: #f8f9fa;
  border-radius: 6px;
}




.logo {
  font-size: 24px;
  font-weight: bold;
  color: #1e88e5;
}

.search-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: 500px;
  margin: 0 20px;
}

.search-box {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
}

.search-button {
  padding: 8px 15px;
  background-color: #1e88e5;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.search-button:hover {
  background-color: #0d47a1;
}

.nav-links {
  display: flex;
  gap: 15px;
}

.nav-links a, .nav-links router-link {
  color: #333;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
}

.nav-links a:hover, .nav-links router-link:hover {
  background-color: #e3f2fd;
}

.active {
  background-color: #e3f2fd;
  color: #1e88e5 !important;
}

actions {
  margin-bottom: 20px;
}

.btn-new-draft {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.btn-new-draft:hover {
  background-color: #218838;
}

</style>